<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      border: 4px solid red;
      ;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }

    .normal {
      background-color: skyblue;
    }

    .atguigu1 {
      background-color: yellowgreen;
    }

    .atguigu2 {
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .atguigu3 {
      border-radius: 20px;
    }
  </style>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
 <!--  
  绑定样式：
  1.class样式
      写法   ：class='xxx' xxx:字符串 对象 数组 
      字符串： 类名不确定，要动态获取
      对象：   绑定多个样式，个数不确定，名字不确定
      数组：   绑定多个样式，个数确定，名字确定，但决定用不用
  2.style样式
    ：style="{fontSize:xxx}" xxx是动态值
    ：style="[a,b]" a,b是样式对象
 -->
  <div id="root">
    <!-- 绑定class样式 -->
    <!-- 字符串写法  样式不确类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br>
    <!-- 数组写法  绑定样式个数不确定，名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div><br>
    <!-- 对象写法  绑定的样式个数确定，名字确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div><br>

    <!-- 绑定style样式 -->
    <!-- 对象写法  -->
    <div class="basic" :style="styleObj">{{name}}</div><br>
    <!-- 数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div><br>
    <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div><br>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。、
    new Vue({
      el: '#root',
      data: {
        name: '尚硅谷',
        mood: 'normal',
        classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
        classObj: {
          atguigu1: false,
          atguigu2: false,
          atguigu3: true
        },
        styleObj: {
          fontSize: '40px',
          color: 'red'
        },
        styleObj2: {
          backgroundColor: 'orange'
        },
        styleArr: [
          {
            fontSize: '40px',
            color: 'red'
          },
          {
            backgroundColor: 'orange'
          }
        ]
      },
      methods: {
        changeMood() {
          const arr = ['happy', 'sad', 'normal']
          const index = Math.floor(Math.random() * 3)
          this.mood = arr[index]
        }
      }
    })
  </script>
</body>

</html>